<template>
	<scroll-view class="scrollarea" scroll-y type="list">
		<view class="container">
			<!-- 顶部区域 -->
			<view class="top-section">
				<view class="location-selector">
					<text class="grade-text">六年级</text>
					<text class="location-text">北京</text>
				</view>
				<view class="search-container">
					<view class="search-box">
						<view v-if="!isSearchFocused" class="search-placeholder">6年级下册数学试卷</view>
						<input class="search-input" placeholder="" v-model="searchText" @input="onSearchInput" @focus="onSearchFocus" @blur="onSearchBlur" confirm-type="search" @confirm="onSearchConfirm"></input>
					</view>
					<view class="search-btn" @tap="onSearchTap">
						<image class="search-btn-icon" src="/static/search.svg"></image>
					</view>
				</view>
			</view>

			<!-- 功能图标区域 -->
			<view class="function-grid">
				<view class="function-item">
					<view class="function-icon homework-icon">
						<image src="/static/homework.svg"></image>
					</view>
					<text class="function-name">作业批改</text>
					<text class="function-desc">整页解析</text>
				</view>
				<view class="function-item">
					<view class="function-icon search-icon">
						<image src="/static/search-question.svg"></image>
					</view>
					<text class="function-name">搜题答疑</text>
					<text class="function-desc">海量题库</text>
				</view>
				<view class="function-item">
					<view class="function-icon ai-icon">
						<image src="/static/ai.svg"></image>
					</view>
					<text class="function-name">AI解题</text>
					<text class="function-desc">智能高效</text>
				</view>
				<view class="function-item">
					<view class="function-icon scan-icon">
						<image src="/static/scan.svg"></image>
					</view>
					<text class="function-name">扫码搜书</text>
					<text class="function-desc">查找解析</text>
				</view>
			</view>

			<!-- 第二行功能图标 -->
			<view class="function-grid second-grid">
				<view class="function-item" @tap="onTranslateTap">
					<view class="function-icon translate-icon">
						<image src="/static/translate.svg"></image>
					</view>
					<text class="function-name">拍照翻译</text>
				</view>
				<view class="function-item">
					<view class="function-icon error-icon">
						<image src="/static/error.svg"></image>
					</view>
					<text class="function-name">错题本</text>
				</view>
				<view class="function-item">
					<view class="function-icon homework2-icon">
						<image src="/static/homework2.svg"></image>
					</view>
					<text class="function-name">作文园地</text>
				</view>
				<view class="function-item">
					<view class="function-icon test-icon">
						<image src="/static/test.svg"></image>
					</view>
					<text class="function-name">试卷真题</text>
				</view>
				<view class="function-item" @tap="onCalculatorTap">
					<view class="function-icon calculator-icon">
						<image src="/static/calculator.svg"></image>
					</view>
					<text class="function-name">计算器</text>
				</view>
			</view>


			<!-- 学习论坛区域 -->
			<view class="forum-section">
				<view class="section-header">
					<text class="section-title">学习论坛</text>
					<text class="section-subtitle">交流学习心得，分享解题经验</text>
					<text class="more-link" @tap="onForumMoreTap">发帖 ></text>
				</view>
				
				<!-- 论坛分类标签 - 可左右滑动 -->
				<scroll-view class="forum-tabs-scroll" scroll-x="true" show-scrollbar="false">
					<view class="forum-tabs">
						<text 
							class="forum-tab" 
							:class="{ active: selectedForumCategory === category.id }"
							v-for="category in forumCategories" 
							:key="category.id"
							@tap="onForumCategoryTap"
							:data-category="category.id"
						>
							{{ category.name }}
						</text>
					</view>
				</scroll-view>

				<!-- 帖子列表 - 可上下滑动 -->
				<scroll-view class="post-list-scroll" scroll-y="true" :style="{ height: postListHeight + 'px' }">
					<view class="post-list" v-if="!loading">
						<view 
							class="post-item" 
							v-for="post in filteredPosts" 
							:key="post.id"
							@tap="onPostTap"
							:data-post-id="post.id"
						>
							<view class="post-header">
								<view class="post-avatar">
									<image :src="post.avatar" class="avatar-image"></image>
								</view>
								<view class="post-info">
									<text class="post-author">{{ post.author }}</text>
									<text class="post-time">{{ post.time }}</text>
								</view>
								<view class="post-category" :class="post.categoryClass">
									{{ getCategoryName(post.categoryId) }}
								</view>
							</view>
							<view class="post-content">
								<text class="post-title">{{ post.title }}</text>
								<text class="post-preview">{{ post.preview }}</text>
							</view>
							<view class="post-stats">
								<view class="stat-item">
									<image src="/static/collection.svg" class="stat-icon"></image>
									<text class="stat-text">{{ post.likes }}</text>
								</view>
								<view class="stat-item">
									<image src="/static/message.svg" class="stat-icon"></image>
									<text class="stat-text">{{ post.comments }}</text>
								</view>
								<view class="stat-item">
									<image src="/static/footprint.svg" class="stat-icon"></image>
									<text class="stat-text">{{ post.views }}</text>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-section" v-if="loading">
						<view class="loading-spinner"></view>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 空状态 -->
					<view class="empty-section" v-if="!loading && filteredPosts.length === 0">
						<image src="/static/empty-message.svg" class="empty-icon"></image>
						<text class="empty-text">暂无帖子，快来发帖吧！</text>
					</view>
				</scroll-view>
			</view>

			<!-- 全局底部导航栏 -->
			<bottom-navigation current-page="index" @navigate="onNavigate"></bottom-navigation>
		</view>
	</scroll-view>
</template>

<script>
		import { getCategories, getPosts, getComments } from '@/api/forum.js'
	
	export default {
		data() {
			return {
				currentTab: 0,
				searchText: '',
				isSearchFocused: false,
				// 论坛相关数据
				selectedForumCategory: 0, // 使用分类ID
			forumCategories: [],
			posts: [],
			comments: [], // 添加评论数据
			loading: false,
			userInfo: null,
				postListHeight: 400 // 帖子列表高度
			}
		},
		computed: {
			filteredPosts() {
				if (this.selectedForumCategory === 0) {
					return this.posts;
				}
				return this.posts.filter(post => post.categoryId === this.selectedForumCategory);
			}
		},
		onLoad: function (options) {
			console.log('首页加载');
			this.loadForumData();
			this.calculatePostListHeight();
		},
		onShow: function () {
			console.log('首页显示');
			this.refreshPosts();
		},
		onReady: function() {
			// 页面渲染完成后计算高度
			this.calculatePostListHeight();
		},
		methods: {
			// 搜索输入事件
			onSearchInput: function(e) {
				this.searchText = e.detail.value;
			},
			// 搜索框获得焦点
			onSearchFocus: function(e) {
				this.isSearchFocused = true;
			},
			// 搜索框失去焦点
			onSearchBlur: function(e) {
				// 如果搜索框为空，则显示提示信息
				if (!this.searchText || this.searchText.trim() === '') {
					this.isSearchFocused = false;
				}
			},
			// 搜索确认事件（键盘搜索按钮）
			onSearchConfirm: function(e) {
				this.performSearch(e.detail.value);
			},
			// 搜索按钮点击事件
			onSearchTap: function() {
				this.performSearch(this.searchText);
			},
			// 执行搜索
			performSearch: function(keyword) {
				if (!keyword || keyword.trim() === '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				console.log('搜索关键词:', keyword);
				
				// 显示搜索中提示
				uni.showLoading({
					title: '搜索中...',
					mask: true
				});

				// 模拟搜索请求
				setTimeout(() => {
					uni.hideLoading();
					
					// 这里可以添加实际的搜索逻辑
					// 比如跳转到搜索结果页面或显示搜索结果
					uni.showToast({
						title: `搜索"${keyword}"`,
						icon: 'success',
						duration: 2000
					});

					// 示例：跳转到搜索结果页面（需要创建对应页面）
					// uni.navigateTo({
					//   url: `/pages/search/search?keyword=${encodeURIComponent(keyword)}`
					// });
				}, 1000);
			},
			// 全局导航栏导航事件
			onNavigate: function(e) {
				const page = e.detail.page;
				console.log('导航到页面:', page);
				
				// 这里可以添加页面特定的导航逻辑
				// 组件内部已经处理了页面跳转
			},
			// 论坛分类选择事件
			onForumCategoryTap: function(e) {
				const categoryId = parseInt(e.currentTarget.dataset.category);
				console.log('选择论坛分类:', categoryId);
				this.selectedForumCategory = categoryId;
			},
			// 论坛更多按钮点击事件
			onForumMoreTap: function() {
				console.log('点击论坛更多');
				uni.navigateTo({
					url: '/pages/create-post/create-post'
				});
			},
			// 帖子点击事件
			onPostTap: function(e) {
				const postId = e.currentTarget.dataset.postId;
				console.log('点击帖子:', postId);
				
				// 跳转到帖子详情页面
				uni.navigateTo({
					url: `/pages/post-detail/post-detail?id=${postId}`
				});
			},
			// 计算器点击事件
			onCalculatorTap: function() {
				console.log('点击计算器');
				uni.navigateTo({
					url: '/pages/calculator/calculator'
				});
			},
			// 拍照翻译点击事件
			onTranslateTap: function() {
				console.log('点击拍照翻译');
				uni.navigateTo({
					url: '/pages/translate/translate'
				});
			},
			// 底部导航栏点击事件
			onTabTap: function(e) {
				const index = parseInt(e.currentTarget.dataset.index);
				console.log('点击底部导航:', index);
				
				switch(index) {
					case 0:
						// 首页，不需要跳转
						break;
					case 1:
						// 消息页面
						uni.navigateTo({
							url: '/pages/message/message'
						});
						break;
					case 2:
						// 排行榜页面
						uni.navigateTo({
							url: '/pages/ranking/ranking'
						});
						break;
					case 3:
						// 个人中心页面
						uni.navigateTo({
							url: '/pages/profile/profile'
						});
						break;
					default:
						console.log('未知导航项');
				}
			},
			// 加载论坛数据
			loadForumData: function() {
				this.loadCategories();
				this.loadPosts();
				this.loadComments();
			},
			// 加载分类数据
			loadCategories: function() {
				getCategories().then(res => {
					console.log('分类数据:', res);
					if (res.data && Array.isArray(res.data)) {
						// 添加"全部"选项
						const categories = [{ id: 0, name: '全部' }, ...res.data];
						this.forumCategories = categories;
					} else {
						// 如果API失败，使用默认分类
						this.forumCategories = [
							{ id: 0, name: '全部' },
							{ id: 1, name: '学习交流' },
							{ id: 2, name: '生活分享' },
							{ id: 3, name: '技术讨论' },
							{ id: 4, name: '校园活动' },
							{ id: 5, name: '求助问答' }
						];
					}
				}).catch(err => {
					console.error('加载分类失败:', err);
					// 使用默认分类
					this.forumCategories = [
						{ id: 0, name: '全部' },
						{ id: 1, name: '学习交流' },
						{ id: 2, name: '生活分享' },
						{ id: 3, name: '技术讨论' },
						{ id: 4, name: '校园活动' },
						{ id: 5, name: '求助问答' }
					];
				});
			},
			// 加载帖子数据
			loadPosts: function() {
				this.loading = true;
				getPosts().then(res => {
					console.log('帖子数据:', res);
					if (res.data && Array.isArray(res.data)) {
						// 处理帖子数据，添加显示需要的字段
						const processedPosts = res.data.map(post => ({
							...post,
							preview: this.getContentPreview(post.content),
							time: this.formatTime(post.createTime),
							author: `用户${post.userId}`,
							avatar: '/static/study-avatar.svg',
							likes: Math.floor(Math.random() * 200),
							comments: Math.floor(Math.random() * 50),
							views: Math.floor(Math.random() * 1000),
							categoryClass: this.getCategoryClass(post.categoryId)
						}));
						this.posts = processedPosts;
					} else {
						this.posts = [];
					}
					this.loading = false;
				}).catch(err => {
					console.error('加载帖子失败:', err);
					this.posts = [];
					this.loading = false;
				});
			},
			// 加载评论数据
			loadComments: function() {
				getComments().then(res => {
					console.log('评论数据:', res);
					if (res.data && Array.isArray(res.data)) {
						this.comments = res.data;
						// 更新帖子的评论数量
						this.updatePostCommentCounts();
					} else {
						this.comments = [];
					}
				}).catch(err => {
					console.error('加载评论失败:', err);
					this.comments = [];
				});
			},
			// 更新帖子评论数量
			updatePostCommentCounts: function() {
				if (this.comments && this.comments.length > 0) {
					this.posts = this.posts.map(post => {
						const commentCount = this.comments.filter(comment => comment.postId === post.id).length;
						return {
							...post,
							comments: commentCount
						};
					});
				}
			},
			// 刷新帖子数据
			refreshPosts: function() {
				if (this.posts.length === 0) {
					this.loadPosts();
				}
				// 同时刷新评论数据
				this.loadComments();
			},
			// 获取内容预览
			getContentPreview: function(content) {
				if (!content) return '';
				return content.length > 50 ? content.substring(0, 50) + '...' : content;
			},
			// 格式化时间
			formatTime: function(time) {
				if (!time) return '';
				const now = new Date();
				const postTime = new Date(time);
				const diff = now - postTime;
				const minutes = Math.floor(diff / 60000);
				const hours = Math.floor(diff / 3600000);
				const days = Math.floor(diff / 86400000);
				
				if (minutes < 60) {
					return `${minutes}分钟前`;
				} else if (hours < 24) {
					return `${hours}小时前`;
				} else {
					return `${days}天前`;
				}
			},
			// 获取分类样式类
			getCategoryClass: function(categoryId) {
				const classMap = {
					1: 'math-category',
					2: 'chinese-category',
					3: 'english-category',
					4: 'physics-category',
					5: 'chemistry-category'
				};
				return classMap[categoryId] || 'default-category';
			},
			// 获取分类名称
			getCategoryName: function(categoryId) {
				const category = this.forumCategories.find(cat => cat.id === categoryId);
				return category ? category.name : '未知分类';
			},
			// 计算帖子列表高度
			calculatePostListHeight: function() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				const windowHeight = systemInfo.windowHeight;
				
				// 计算可用高度：窗口高度 - 顶部区域 - 功能区域 - 论坛标题 - 分类标签 - 底部导航
				const topSectionHeight = 120; // 顶部搜索区域
				const functionGridHeight = 200; // 功能图标区域
				const forumHeaderHeight = 60; // 论坛标题区域
				const categoryTabsHeight = 50; // 分类标签区域
				const bottomNavHeight = 60; // 减少底部导航区域高度
				const padding = 10; // 进一步减少各种间距，给论坛更多空间
				
				const availableHeight = windowHeight - topSectionHeight - functionGridHeight - forumHeaderHeight - categoryTabsHeight - bottomNavHeight - padding;
				
				// 设置最小高度400px，最大高度900px（进一步增加高度，减少与导航栏距离）
				this.postListHeight = Math.max(400, Math.min(900, availableHeight));
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	}

	.scrollarea {
		flex: 1;
		overflow-y: hidden;
	}

	.container {
		padding: 0 20px;
		padding-bottom: 120px; /* 增加底部空间 */
		min-height: 120vh; /* 增加页面高度 */
		overflow-x: hidden; /* 防止水平溢出 */
	}

	/* 顶部区域样式 */
	.top-section {
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		padding: 20px 20px 24px 20px; /* 减少顶部内边距 */
		margin: 60px 8px 24px 8px; /* 增加底部边距 */
		display: flex;
		flex-direction: column;
		gap: 20px;
		border-radius: 24px; /* 改为全圆角 */
		box-shadow: 0 4px 20px rgba(255, 107, 53, 0.15);
		width: calc(100% - 16px); /* 减去左右边距 */
		position: relative;
	}

	.location-selector {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.grade-text {
		color: #ffffff;
		font-size: 18px;
		font-weight: 600;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.location-text {
		color: rgba(255, 255, 255, 0.9);
		font-size: 16px;
		font-weight: 400;
	}

	.search-container {
		display: flex;
		align-items: center;
		gap: 16px;
		flex: 1;
	}

	.search-box {
		flex: 1;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 25px;
		padding: 14px 20px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10px);
		position: relative;
	}

	.search-placeholder {
		position: absolute;
		left: 20px;
		top: 50%;
		transform: translateY(-50%);
		color: #64748b;
		font-size: 15px;
		font-weight: 400;
		pointer-events: none;
		z-index: 1;
	}

	.search-input {
		flex: 1;
		color: #1f2937;
		font-size: 15px;
		font-weight: 400;
		background: transparent;
		border: none;
		outline: none;
		position: relative;
		z-index: 2;
	}

	.search-input::placeholder {
		color: #64748b;
	}

	.search-btn {
		width: 48px;
		height: 48px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.search-btn:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.3);
	}

	.search-btn-icon {
		width: 20px;
		height: 20px;
		filter: brightness(0) invert(1);
	}

	/* 功能图标区域样式 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		margin-bottom: 24px; /* 增加底部边距 */
		background: white;
		border-radius: 20px;
		padding: 20px 20px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.8);
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 8px;
		border-radius: 16px;
		transition: all 0.3s ease;
		position: relative;
	}

	.function-item:active {
		transform: scale(0.95);
		background: rgba(255, 107, 53, 0.05);
	}

	.function-icon {
		width: 56px;
		height: 56px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.function-icon:active {
		transform: scale(0.9);
	}

	.function-icon image {
		width: 32px;
		height: 32px;
		filter: brightness(0) invert(1);
	}

	.homework-icon {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	}

	.search-icon {
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	}

	.ai-icon {
		background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
	}

	.scan-icon {
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	}

	.translate-icon {
		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	}

	.error-icon {
		background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	}

	.homework2-icon {
		background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
	}

	.test-icon {
		background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
	}

	.calculator-icon {
		background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
	}

	.function-name {
		font-size: 13px;
		color: #374151;
		font-weight: 600;
		text-align: center;
		line-height: 1.2;
	}

	.function-desc {
		font-size: 11px;
		color: #6b7280;
		text-align: center;
		line-height: 1.2;
	}

	/* 第二行功能按钮特殊样式 */
	.second-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 12px;
		margin-bottom: 24px; /* 增加底部边距 */
	}

	.second-grid .function-item {
		gap: 8px;
	}

	.second-grid .function-icon {
		width: 48px;
		height: 48px;
	}

	.second-grid .function-icon image {
		width: 28px;
		height: 28px;
	}

	.second-grid .function-name {
		font-size: 12px;
	}


	/* 论坛区域样式 */
	.forum-section {
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
		border-radius: 14px;
		padding: 16px 12px;
		margin: 0 8px 0 8px; /* 与顶部搜索区域保持相同的左右边距，底部边距设为0延伸到导航栏 */
		width: calc(100% - 16px); /* 与顶部搜索区域保持相同的宽度 */
		height: calc(100vh - 150px); /* 减少与导航栏的距离，增加论坛高度 */
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(102, 126, 234, 0.1);
		position: relative;
		overflow: hidden;
	}

	.forum-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
		border-radius: 14px 14px 0 0;
	}

	/* 论坛标题样式 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px; /* 增加底部边距 */
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(102, 126, 234, 0.1);
	}

	.section-title {
		font-size: 18px;
		font-weight: 700;
		color: #1e293b;
		margin-bottom: 4px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.section-subtitle {
		font-size: 12px;
		color: #6b7280;
		font-weight: 500;
	}

	.more-link {
		font-size: 12px;
		color: #667eea;
		font-weight: 600;
		padding: 6px 12px;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		border-radius: 12px;
		border: 1px solid rgba(102, 126, 234, 0.2);
		transition: all 0.3s ease;
	}

	/* 分类滑动容器 */
	.forum-tabs-scroll {
		width: 100%;
		margin-bottom: 16px; /* 增加底部边距 */
		white-space: nowrap;
	}

	.forum-tabs {
		display: flex;
		gap: 6px;
		padding-bottom: 6px;
		width: max-content;
	}

	.forum-tab {
		font-size: 12px;
		color: #64748b;
		padding: 8px 14px;
		border-radius: 16px;
		white-space: nowrap;
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
		border: 1px solid rgba(102, 126, 234, 0.15);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		font-weight: 600;
		flex-shrink: 0;
		display: inline-block;
		min-width: 60px;
		max-width: 80px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		position: relative;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.forum-tab.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
		color: white;
		border-color: transparent;
		box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
		transform: translateY(-2px);
	}

	/* 帖子列表滑动容器 */
	.post-list-scroll {
		width: 100%;
	}

	.post-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 0 4px;
	}

	.post-item {
		background: white;
		border-radius: 10px;
		padding: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		border: 1px solid rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.post-item:active {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	}

	.post-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 14px;
	}

	.post-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
	}

	.post-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.post-author {
		font-size: 12px;
		font-weight: 600;
		color: #1f2937;
	}

	.post-time {
		font-size: 10px;
		color: #6b7280;
	}

	.post-category {
		padding: 4px 8px;
		border-radius: 8px;
		font-size: 10px;
		font-weight: 600;
		color: white;
		flex-shrink: 0;
	}

	.math-category {
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	}

	.chinese-category {
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	}

	.english-category {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	}

	.physics-category {
		background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
	}

	.chemistry-category {
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	}

	.default-category {
		background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
	}

	.post-content {
		margin-bottom: 14px;
	}

	.post-title {
		font-size: 16px; /* 放大标题字体 */
		font-weight: 700;
		color: #1f2937;
		line-height: 1.3;
		margin-bottom: 6px;
		display: block;
		word-wrap: break-word; /* 允许长单词换行 */
		word-break: break-word; /* 强制换行 */
		white-space: normal; /* 允许正常换行 */
	}

	.post-preview {
		font-size: 12px;
		color: #6b7280;
		line-height: 1.4;
		display: block;
		word-wrap: break-word; /* 允许长单词换行 */
		word-break: break-word; /* 强制换行 */
		white-space: normal; /* 允许正常换行 */
	}

	.post-stats {
		display: flex;
		gap: 12px;
		align-items: center;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.stat-icon {
		width: 12px;
		height: 12px;
		opacity: 0.6;
	}

	.stat-text {
		font-size: 10px;
		color: #6b7280;
		font-weight: 500;
	}

	/* 加载状态样式 */
	.loading-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 40px 30px;
		justify-content: center;
		height: 200px;
	}

	.loading-spinner {
		width: 28px;
		height: 28px;
		border: 3px solid #e5e7eb;
		border-top: 3px solid #667eea;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-text {
		font-size: 13px;
		color: #6b7280;
		font-weight: 500;
	}

	/* 空状态样式 */
	.empty-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 40px 30px;
		justify-content: center;
		height: 200px;
	}

	.empty-icon {
		width: 60px;
		height: 60px;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 14px;
		color: #6b7280;
		font-weight: 500;
	}
</style>
